<template>
  <view class="flex-1 flex-grow overflow-hidden bg-white flex-shrink-0">
    <view class="chat-container w-full h-full">
      <view id="chat-wrapper" class="chat-scroll w-full h-full">
        <view class="chat-content">
          <!-- 下拉更多 -->
          <custom-refresher v-if="refresherShow" :status="refresherStatus"></custom-refresher>
          <view class="w-full h-6 flex flex-row justify-center items-center gap-3" v-else>
            <view class="w-8 h-[1px] bg-[#f00]"></view>
            <view class="flex flex-row justify-center items-center">
              <text class="text-xs text-[#f00]">下拉加载历史</text>
            </view>
            <view class="w-8 h-[1px] bg-[#f00]"></view>
          </view>
          <chat-item />
        </view>
      </view>
    </view>
  </view>
</template>
<script setup lang="ts">
import ChatItem from '@/components/ChatItem/index.vue'
import customRefresher from '@/components/custom-refresher/custom-refresher.vue'
import BScroll, { MouseWheel, ObserveDom, ObserveImage, PullDownRefresh, ScrollBar } from 'better-scroll'
import { nextTick, onBeforeUnmount, onMounted, ref } from 'vue'

const bs = ref()
BScroll.use(MouseWheel)
BScroll.use(PullDownRefresh)
BScroll.use(ObserveDom)
BScroll.use(ObserveImage)
BScroll.use(ScrollBar)
const refresherStatus = ref('default')
const refresherShow = ref(false)
onMounted(() => {
  nextTick(() => {
    initScroll()
  })
})
const initScroll = () => {
  if (process.env.UNI_PLATFORM === 'mp-weixin') {
    const query = uni.createSelectorQuery().in(this)
    query
      .select('.chat-scroll')
      .node(res => {
        bs.value = new BScroll(res.node, {
          probeType: 3,
          scrollX: true, // 横向滚动
          scrollY: false, // 禁止纵向滚动
          click: true, // 允许点击
          bounce: true // 边界回弹
        })
      })
      .exec()
  } else {
    const el = document.getElementById('chat-wrapper')
    if (el) {
      bs.value = BScroll(el, {
        probeType: 1,
        bindToWrapper: true,
        scrollX: false, // 横向滚动
        scrollY: true, // 禁止纵向滚动
        click: true, // 允许点击
        bounce: true, // 边界回弹
        observeDOM: true,
        observeImage: true,
        mouseWheel: {
          speed: 20,
          invert: false,
          easeTime: 300
        },
        pullDownRefresh: {
          threshold: 20,
          stop: 10
        }
      })
      bs.value.on('pullingDown', handlePullingDown)
      bs.value.on('scroll', handleScroll)
    }
  }
}
const handlePullingDown = () => {
  console.log('开始刷新')
  refresherShow.value = true
  refresherStatus.value = 'loading'
  setTimeout(() => {
    console.log('刷新完成')
    refresherStatus.value = 'complete'
    refresherShow.value = false
    bs.value.finishPullDown()
  }, 1000)
}
const handleScroll = ({ y }: { x?: number; y: number }) => {
  switch (refresherStatus.value) {
    case 'default':
      if (y > 0 && y <= 20) {
        refresherShow.value = true
        refresherStatus.value = 'default'
      }
    case 'complete':
      if (y > 20) {
        refresherShow.value = true
        refresherStatus.value = 'release-to-refresh'
      } else {
        refresherShow.value = false
        refresherStatus.value = 'default'
      }
      break
  }
}
// 重置滚动区域并重新计算高度
const refreshHeight = async () => {
  bs && bs.value.refresh()
}
onBeforeUnmount(() => {
  if (bs.value) {
    bs.value.destroy()
  }
})
</script>
